<template>
	<view :class="['details', detailsHeight== 0 ? '':'bgblue']" :style="{bottom:detailsHeight}">
		<uni-section title="基本信息">
			<!-- 			<template v-slot:right>
						预计供地时间：{{speckleData.gdsj }}
					</template> -->
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in showField" :key="item.id">
					<uni-td width="90" align="center">{{item.showName}}</uni-td>
					<uni-td>{{speckleData?speckleData[item.columnName]:'暂无数据'}}</uni-td>
				</uni-tr>
			</uni-table>
		</uni-section>

		<view class="functionButtons">
			<u-tabbar :fixed="false" :placeholder="false" :safeAreaInsetBottom="false">
				<u-tabbar-item text="地块详情" icon="grid-fill" @click="goToTab('detailsOfThePlot')"></u-tabbar-item>
				<u-tabbar-item text="全景查看" icon="eye-fill" @click="goToTab('panoramicView')"></u-tabbar-item>
			</u-tabbar>
		</view>
		<view class="arrow" @click="move(3)">
			<u-icon :name="iconName" color="#5a89c3" size="30px"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		getCategory,
		getRichTextData
	} from "@/api/land.js"
	import {
		toast
	} from '@/utils/common'
	export default {
		name: "DataDetails",
		data() {
			return {
				iconName: 'arrow-down',
				detailsHeight: '-20rem',
				showField: [{

						"id": 111,
						"fuId": 13,
						"showName": "地块编号",
						"realName": "地块编号",
						"columnName": "bianhao",
					},
					{

						"id": 112,
						"fuId": 13,
						"showName": "名称",
						"realName": "地块名称",
						"columnName": "name",
					}, {

						"id": 113,
						"fuId": 13,
						"showName": "规划用途",
						"realName": "规划用途",
						"columnName": "ghyt",
					}, {

						"id": 114,
						"fuId": 13,
						"showName": "供地面积",
						"realName": "地块面积",
						"columnName": "mianji",
					}, {

						"id": 115,
						"fuId": 13,
						"showName": "供地方式",
						"realName": "供地方式",
						"columnName": "gdfs",
					}, {

						"id": 116,
						"fuId": 13,
						"showName": "四至",
						"realName": "四至范围",
						"columnName": "sizhi",
					}, {

						"id": 117,
						"showName": "净地情况",
						"realName": "净地情况",
						"columnName": "jdqk",
					}, {

						"id": 118,
						"showName": "基础设施",
						"realName": "配套情况",
						"columnName": "jcss",
					}, {

						"id": 119,
						"showName": "所属区",
						"realName": "所属城区开发区",
						"columnName": "quyu",
					}
				],
				oldShowField: '',
				interval: null
			};
		},
		watch: {
			// speckleData(newVal, oldVal) {
			// 	if (!newVal) {
			// 		this.showField = []
			// 	}
			// 	if (newVal) {
			// 		this.showField = this.oldShowField
			// 	}
			// }
		},
		props: ['speckleData'],
		methods: {
			goToTab(str) {
				if (str == 'detailsOfThePlot') {
					if (this.speckleData.objectid || this.speckleData.objectid == 0) {
						uni.navigateTo({
							url: "/pages/Land/detailsOfThePlot?id=" + this.speckleData.objectid
						})
					} else {
						this.interval = setInterval(() => {
							if (this.speckleData.objectid || this.speckleData.objectid == 0) {
								uni.navigateTo({
									url: "/pages/Land/detailsOfThePlot?id=" + this.speckleData.objectid
								})
								clearInterval(this.interval)
							}
						}, 500)
					}
				}
				if (str == 'panoramicView') {
					getRichTextData(this.speckleData.objectid).then(res => {
						console.log(res)
						if (!res.data.qeldz) {
							return toast('此地块暂无全景数据')
						}
						uni.navigateTo({
							url: '/pages/common/webview/index?url=' + res.data.qeldz + '&title=地块示意图'
						})
					})
				}

			},
			move(val) {
				// this.detailsHide = !this.detailsHide

				if (val == 1) {
					this.detailsHeight = '0'
					this.iconName = 'arrow-down'
				}
				if (val == 2) {
					this.detailsHeight = '-20rem'
					this.iconName = 'arrow-up'
					console.log('111')
				}
				if (val == 3) {
					this.detailsHeight = '-20rem'
					this.iconName = 'arrow-up'
					this.$emit('resetHeight')
				}
			},
			// 获取展示字段
			getShowField(codeValue) {
				const data = {
					serveCode: codeValue,
					code: 'dksx'
				}
				getCategory(data).then(res => {
					this.showField = res.data
					console.log(this.showField, 'zxczxc')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
	}

	.map {
		height: 100%;
		background-color: greenyellow;
	}

	.bgblue {
		background-color: #dedede;
	}

	.details {
		width: 100%;
		height: 300px;
		position: fixed;
		bottom: -20rem;
		z-index: 999;
		background-color: #d3e3fd;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
		box-sizing: border-box;
		padding-top: 30px;
		transition: all .5s;

		.title {
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			border-bottom: 1px solid #d2d2d2;
			padding: 20rpx;
		}

		.textContent {


			.row {
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				margin-top: 40rpx;

				.serialNumber {
					font-weight: 600;
				}

				.rightTextWidth {
					width: 230rpx;
				}

				text {
					font-size: 12px;
				}

				view label {
					font-weight: 600;
				}
			}
		}

		.functionButtons {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-between;

			.button {
				display: flex;
				justify-content: center;
				align-items: center;

				label {
					font-size: 14px;
					margin-left: 5px;
				}
			}
		}

		.arrow {
			width: 100%;
			position: absolute;
			text-align: center;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}

	::v-deep .u-icon__icon {
		font-size: 24px !important;
	}

	::v-deep .uni-table {
		margin-bottom: 14px
	}

	::v-deep .u-tabbar-item__icon {
		height: 24px;
	}

	::v-deep .uni-table-tr {
		td:nth-child(1) {
			width: 160rpx;
		}
	}

	::v-deep .uni-section-content {
		height: 11rem;
		overflow: auto;
	}

	::v-deep .uni-section-content {
		background-color: #ddd;
		height: 190px;
		margin-bottom: 20px;
		padding: 4px;
	}
</style>